<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 头部内容 -->
      <page-tools :show-before="true">
        <template slot="before">
          <span>本月：入职 离职 调薪 未定薪</span>
        </template>
        <template slot="after">
          <el-button type="info" @click="$router.push('/salarys/seeting')">设置</el-button>
          <el-button type="primary" :disabled="btn" @click="$router.push(`/salarys/month/${yearMonth}`)">{{ yearMonth }}月份报表</el-button>
        </template>
      </page-tools>
      <!-- 中间内容卡片 -->
      <!-- 条件筛选 -->
      <el-card id="hr-block">
        <el-form label-width="80px">
          <div class="but">
            <el-form-item label="聘用形式:">
              <el-checkbox-group v-model="hireTypeCheck">
                <el-checkbox v-for="item in hireType" :key="item.id" :label="item.id">{{ item.value }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="员工状态:" style="margin-left:50px">
              <el-checkbox-group v-model="workingStateCheck">
                <el-checkbox v-for="item in workingState" :key="item.id" :label="item.id">{{ item.value }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <el-form-item label="部门:">
            <el-checkbox-group v-model="departmentsCheck">
              <el-checkbox v-for="item in departments" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 底部列表 -->
      <el-card v-loading="loading">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="100"
            type="index"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="150"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="180"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="150"
          />
          <el-table-column
            prop="formOfEmployment"
            :formatter="formatEmployment"
            label="聘用形式"
            width="150"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="150"
          />
          <el-table-column
            label="入职时间"
            width="150"
          >
            <template v-slot:default="obj">
              {{
                obj.row.timeOfEntry | formatDate
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="工资基数"
            width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.currentBasicSalary + scope.row.currentPostWage }}
            </template>
          </el-table-column>
          <el-table-column
            label="津贴方案"
            width="150"
          >
            {{ subsidyName }}
          </el-table-column>
          <el-table-column
            label="操作"
            width="250"
          >
            <template slot-scope="scope" style>
              <el-button
                v-if="scope.row.currentBasicSalary + scope.row.currentPostWage > 0 "
                size="mini"
                type="primary"
                @click="changeSalary(scope.row.id)"
              >调薪</el-button>
              <el-button
                v-else
                size="mini"
                type="danger"
                @click="changeFixedSalary(scope.row.id)"
              >定薪</el-button>
              <el-button @click="$router.push(`/salarys/detail/${scope.row.id}/${yearMonth}`)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" style="margin-top:10px">
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

      <!-- 调薪弹窗 -->
      <changeSalary ref="salary" :show-dialog.sync="showDialog" :user-id="userId" :user-info="userInfo" @success="getSalarysList" />
      <!-- 定薪组件 -->
      <fixedSalary :show-dialog-fixed.sync="showDialogFixed" :user-id="userId" @success="getSalarysList" />
    </div>
  </div>
</template>

<script>
import EmployeeData from '@/api/constant/employees'
import { getDepartments } from '@/api/departments'
import { getSalarysList, getSalaryDetail, getSalarysSetting, getCompanySetting } from '@/api/salarys'

import changeSalary from './components/change-salary'
import fixedSalary from './components/fixed-salary'
export default {
  components: {
    changeSalary,
    fixedSalary
  },
  data() {
    return {
      btn: true,
      loading: false,
      hireType: EmployeeData.hireType,
      workingState: EmployeeData.workingState,
      departments: [],
      tableData: [],

      hireTypeCheck: [],
      workingStateCheck: [],
      departmentsCheck: [],

      subsidyName: '',
      page: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      // 调薪弹窗组件
      showDialog: false,
      userId: '',
      userInfo: {},
      // 定薪
      showDialogFixed: false,
      yearMonth: ''

    }
  },
  watch: {
    hireTypeCheck() {
      this.getSalarysList()
    },
    workingStateCheck() {
      this.getSalarysList()
    },
    departmentsCheck() {
      this.getSalarysList()
    }
  },
  async mounted() {
    this.loading = true
    this.departments = (await getDepartments()).depts
    this.getSalarysList()
    this.getSalarysSetting()
  },
  methods: {
    async getSalarysSetting() {
      // 获取津贴方案
      const res = await getSalarysSetting()
      this.subsidyName = res.subsidyName
    },
    async getSalarysList() {
      const { rows, total } = await getSalarysList({ ...this.page, hireTypeCheck: this.hireTypeCheck, workingStateCheck: this.workingStateCheck, departmentsCheck: this.departmentsCheck })
      // console.log(rows)
      const res = await getCompanySetting()
      this.yearMonth = res.dataMonth
      this.btn = false
      this.tableData = rows
      this.page.total = total
      this.loading = false
    },
    // 对聘用形式进行文本显示
    formatEmployment(row) {
      const data = this.hireType.find(item => item.id === row.formOfEmployment)
      return data ? data.value : '未知'
    },
    async changeSalary(id) {
      this.userId = id
      this.$refs.salary.getUserDetailById(id)
      this.userInfo = await getSalaryDetail(id)
      this.showDialog = true
    },
    // 分页
    currentChange(newPage) {
      // console.log(newPage)
      this.page.page = newPage
      this.getSalarysList()
    },
    sizeChange(newPageSize) {
      // console.log(newPageSize)
      this.page.pageSize = newPageSize
      this.getSalarysList()
    },
    changeFixedSalary(id) {
      this.userId = id
      this.showDialogFixed = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 0;
}
::v-deep .el-form-item__label {
  text-align: left;
}
.but {
  display: flex;
}
#hr-block {
  margin-bottom: 15px;
}
</style>
